<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      div.one {
        width: 300px;
        border: solid 2px skyblue;
        margin-bottom: 100px;
        /* 单行 */
        overflow: hidden;
        text-overflow: ellipsis;
        text-wrap: nowrap;
      }
      div.two {
        width: 300px;
        border: solid 2px orangered;
        /* 多行 */
        overflow: hidden;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 4;
      }
    </style>
  </head>
  <body>
    <div class="box">
      <div class="one">
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolore debitis ducimus placeat ipsa? Aspernatur fugit
        porro, sequi esse quos placeat.
      </div>
      <div class="two">
        Lorem ipsum dolor sit amet consectetur, adipisicing elit. Nam molestiae aliquid tenetur ab fuga, eaque
        voluptatum nobis nostrum labore necessitatibus eum tempore reprehenderit sunt magni nisi perspiciatis,
        cupiditate, optio provident! Ipsum sit, delectus provident rem facere recusandae excepturi fuga placeat eveniet,
        nam iusto. Sapiente suscipit animi eveniet fuga laborum rerum, facilis quis nam provident consectetur repellat
        fugit porro? Eligendi saepe, eaque at facilis libero quaerat ab quia quisquam similique animi ex, eos quas
        adipisci in molestias atque dolorem ipsum velit!
      </div>
    </div>
  </body>
</html>
